
<div id="myView" class="viewport">
    <div class="column column-left">
    <h3 class="time" style="position:relative;margin-top:-2rem;margin-left: 5rem;color: #68d8fe!important;margin-bottom: 1.2rem;">
    
    </h3>
        <!--概览-->
        <div class="overview panel">
            <div class="inner">
            <div class="item">
                    <h4>{{ $boxStatus['total'] }}</h4>
                    <span>
                        <i class="icon-dot" style="color: green"></i>
                        新增设备
                    </span>
                </div>
                <div class="item">
                    <h4>{{ $boxStatus['total'] }}</h4>
                    <span>
                        <i class="icon-dot" style="color: #006cff"></i>
                        设备总数
                    </span>
                </div>
                <div class="item">
                    <h4>{{ $boxStatus['online'] }}</h4>
                    <span>
                        <i class="icon-dot" style="color: #6acca3"></i>
                        在线设备
                    </span>
                </div>
                <div class="item">
                    <h4>{{ $boxStatus['offline'] }}</h4>
                    <span>
                        <i class="icon-dot" style="color: #ed3f35"></i>
                        离线设备
                    </span>
                </div>
            </div>
        </div>
        <!--监控-->
        <div class="monitor panel">
            <div class="inner">
                <div class="tabs">
                    <a href="javascript:;" data-index="0" class="active">设备报警监控</a>
                </div>
                <div class="content" style="display: block;">
                    <div class="head">
                        <span class="col">报警时间</span>
                        <span class="col">报警信息</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            @foreach($alertLogList as $v)
                            <div class="row">
                                <span class="col">{{ $v['created_at'] }}</span>
                                <span class="col">{{ $v['msg'] }}</span>
                                <span class="icon-dot"></span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--点位-->
        <div class="point panel">
            <div class="inner">
                <h3>点位分布统计</h3>
                <div class="chart">
                    <div class="pie" id="dianwei"></div>
                    <div class="data">
                        <div class="item">
                            <h4>320,11</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35"></i>
                                点位总数
                            </span>
                        </div>
                        <div class="item">
                            <h4>418</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19"></i>
                                本月新增
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column">
        <!-- 地图 -->
        <div class="map">
            <div class="chart">
                <div id="jkmap" class="geo"></div>
            </div>
        </div>
        <!-- 用户 -->
        <div class="users panel">
            <div class="inner">
                <h3>全国用户总量统计</h3>
                <div class="chart">
                    <div class="bar"></div>
                    <div class="data">
                        <div class="item">
                            <h4>120,899</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35"></i>
                                用户总量
                            </span>
                        </div>
                        <div class="item">
                            <h4>248</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19"></i>
                                本月新增
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column column-right">
        <div style="display:flex;justify-content:center;margin-top: -2rem;">
            <div class="panel1" id="center" >
                <h3 style="margin-top: -0.15rem;margin-right: 0.5rem;cursor: pointer;color:#68d8fe;">进入系统</h3>
            </div>
            <div class="panel1">
                <h3 style="margin-top: -0.15rem;margin-right: 0.5rem;color:#68d8fe;"><a href="auth/logout"><span style="color:#68d8fe;">退出</span></a></h3>
            </div>
        </div>
        <!-- 订单 -->
        <div class="order panel">
            <div class="inner">
                <!-- 筛选 -->
                <div class="filter">
                    <a href="javascript:;" data-key="day365" class="active">365天</a>
                    <a href="javascript:;" data-key="day90">90天</a>
                    <a href="javascript:;" data-key="day30">30天</a>
                    <a href="javascript:;" data-key="day1">24小时</a>
                </div>
                <!-- 数据 -->
                <div class="data">
                    <div class="item">
                        <h4>20,301,987</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35;"></i>
                            紧急报警
                        </span>
                    </div>
                    <div class="item">
                        <h4>99834</h4>
                        <span>
                            <i class="icon-dot" style="color: #eacf19;"></i>
                            普通报警
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 销售额 -->
        <div class="sales panel">
            <div class="inner">
                <div class="caption">
                    <h3>数据采集统计</h3>
                    <a href="javascript:;" class="active" data-type="year">年</a>
                    <a href="javascript:;" data-type="quarter">季</a>
                    <a href="javascript:;" data-type="month">月</a>
                    <a href="javascript:;" data-type="week">周</a>
                </div>
                <div class="chart">
                    <div class="label">单位:万</div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <!-- 渠道 季度 -->
        <div class="wrap">
            <div class="channel panel">
                <div class="inner">
                    <h3>渠道分布</h3>
                    <div class="data">
                        <div class="item">
                            <h4>39 <small>%</small></h4>
                            <span>
                                <i class="icon-plane"></i>
                                机场
                            </span>
                        </div>
                        <div class="item">
                            <h4>28 <small>%</small></h4>
                            <span>
                                <i class="icon-bag"></i>
                                商场
                            </span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="item">
                            <h4>20 <small>%</small></h4>
                            <span>
                                <i class="icon-train"></i>
                                地铁
                            </span>
                        </div>
                        <div class="item">
                            <h4>13 <small>%</small></h4>
                            <span>
                                <i class="icon-bus"></i>
                                火车站
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="quarter panel">
                <div class="inner">
                    <h3>监控点</h3>
                    <div class="chart">
                        <div class="box">
                            <div class="gauge"></div>
                            <div class="label">75<small> %</small></div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>1,321</h4>
                                <span>
                                    <i class="icon-dot" style="color: #6acca3"></i>
                                    监控点(个)
                                </span>
                            </div>
                            <div class="item">
                                <h4>153</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    新增数量
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 排行榜 -->
        <div class="rightdown panel">
            <div class="inner">
                <h3>设备类型</h3>
                <div class="chart">
                    <div class="pie" id="leixing"></div>
                    <div class="data">
                        <div class="item">
                            <h4>1,094</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35"></i>
                                设备总数
                            </span>
                        </div>
                        <div class="item">
                            <h4>105</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19"></i>
                                本月新增
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //首页主题强制dark
    $("body").hasClass('dark-mode');
    if (!$("body").hasClass('dark-mode')) {
        $("body").addClass('dark-mode');
    }
    //进入后强制def
    localStorage.setItem('dcat-admin-theme-mode', 'def');
    
    $(".content-header").remove();
    var head = document.getElementById('pjax-container');
    head.style.cssText = "margin-left:0;padding:0 0 0 2rem;"
    $('.main-menu').remove();
    $('.header-navbar').remove();
    $('.text-center').remove();
    var provinceNum = {{ $provinceList['num'] }};
    var provinceData = {!! $provinceList['data'] !!};

    var oDiv = document.getElementById("center");
    oDiv.onclick = function(){
        window.location.href="Project";
    }
    // document.fullScreenEnabled = true;
    // setTimeout(() => {
    //     document.getElementById("aid").click();
    // }, 1000);
    // function openFullscreen() {
    //     var elem = document.documentElement;
    //     if (elem.requestFullscreen) {
    //         elem.requestFullscreen();
    //     } else if (elem.mozRequestFullScreen) {    /* Firefox */
    //         elem.mozRequestFullScreen();
    //     } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    //         elem.webkitRequestFullscreen();
    //     } else if (elem.msRequestFullscreen) {     /* IE/Edge */
    //         elem.msRequestFullscreen();
    //     }
    // }
</script>
<!-- <script src="{{ admin_asset('new-index/js/jquery-1.10.2.js')}}"></script> -->
<script src="{{ admin_asset('new-index/js/echarts.min.js')}}"></script>
<script src="{{ admin_asset('new-index/js/china.js')}}"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=aAufLw6Y22hndUYH8UOfiFq0wG2u2RxH"></script>

<script language="javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/bmap.js"></script>

<script type="text/javascript">
Dcat.ready(function () {
    // 全屏
    // window.onload = function() {
    //     var el = document.documentElement;
    //     el.requestFullscreen||el.mozRequestFullScreen||el.webkitRequestFullscreen||el.msRequestFullScreen?
    //     el.requestFullscreen()||el.mozRequestFullScreen()|| el.webkitRequestFullscreen()||el.msRequestFullscreen():null;
    // }
    // console.log(document.fullscreenEnabled)

   

    var data = <?php echo json_encode($alarmproject); ?>;
    var data1 = <?php echo json_encode($inlineproject); ?>;
    var geoCoordMap = <?php echo json_encode($address); ?>;
    var chinaMap = echarts.init(document.getElementById("jkmap"));

    var t = null;
    t = setTimeout(time, 1000); //開始运行
    function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.querySelector(".time").innerHTML =
        y +
        "年" +
        mt +
        "月" +
        day +
        "日" +
        h +
        "时" +
        m +
        "分" +
        s +
        "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行
    }

    chinaMap.on('click',function(args){ //点击跳转
    console.log(args.data);
        // if(args.data.name=='湖北'){
            location.href = args.data.content;//测试效果
        // }
    });

    window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize
    var option;
    var data3 = [//报警项目
        { name: '海门服务站', value: 134, content: '1' },
        { name: '鄂尔多斯', value: 134, content: '2' },
        { name: '招远', value: 134, content: '3' },
        { name: '舟山', value: 134, content: '4' },
        { name: '齐齐哈尔', value: 134, content: '5' },
        { name: '盐城', value: 134, content: '6' },
        { name: '赤峰', value: 134, content: '7' },
        { name: '青岛', value: 133, content: '8' },
        { name: '抚顺', value: 135, content: '33' },
        { name: '玉溪', value: 135, content: '34' },
        { name: '张家口', value: 135, content: '姓名：李**<br/>电话：159****6228<br/> 服务站编号：鲁P030001<br/>地址：牛角店镇夏码村南' },
    ]
    var data4 = [ //在线项目
        { name: '盐城1', value: 133, content: '<a href="#">关键词</a>' },
        { name: '赤峰2', value: 133, content: '7' },
        { name: '青岛3', value: 133, content: '8' },
    ]
    var geoCoordMap1 = { //项目坐标
        '海门': [121.15, 31.89],
        '鄂尔多斯': [109.781327, 39.608266],
        '招远': [120.38, 37.35],
        '舟山': [122.207216, 29.985295],
        '齐齐哈尔': [123.97, 47.33],
        '盐城': [120.13, 33.38],
        '赤峰': [118.87, 42.28],
        '青岛': [120.33, 36.07],
        '抚顺': [123.97, 41.97],
        '玉溪': [102.52, 24.35],
        '张家口': [114.87, 40.82],
        '盐城1': [125.153, 33.38],
        '赤峰2': [112.877, 42.28],
        '青岛3': [124.303, 36.07]
    };
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                    content: data[i].content,
                });
            }
        }
        return res;
    };
    option = {
        tooltip: {
            trigger: 'item',
            formatter: function (b) {
                return b.data.content
            },
        },
        geo:{
            map: "china", // 表示中国地图
            roam: true,
            zoom:1.2, //当前视角的缩放比例
            itemStyle: {
                normal: {
                borderColor: "#293171",
                borderWidth: "1",
                areaColor: "#0A0F33",
            },
            emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            },
        },
        series: [
            // {
            //     name: '中国',
            //     // type: 'map',
            //     mapType: 'china',
            //     selectedMode: 'multiple',
            //     type: 'scatter',
            //     coordinateSystem: 'bmap',
            //     data: convertData(data),
            //     symbolSize: function (val) {   
            //         if(val[2]===134) 
            //         return val[2] /10; 
            //     },
            //     tooltip: {
            //         trigger: 'item',
            //         formatter: '{b}'
            //     },
            //     dataRange: {
            //         x: '-1000px', //图例横轴位置
            //         y: '-1000px', //图例纵轴位置
                    
            //     },
            //     encode: {
            //         value: 2
            //     },
            //     label: {
            //         formatter: '{b}',
            //         position: 'right',
            //         show: false
            //     },
            //     emphasis: {
            //         label: {
            //             show: true
            //         }
            //     },
            //     itemStyle: {
            //         normal: {
            //             label: {
            //                 show: true
            //             },
            //             borderWidth: 3, //省份的边框宽度
            //             borderColor: '#F0F5F7', //省份的边框颜色
            //             color: '#ece2df' //地图背景颜色
            //             //areaStyle:{color:'#f60'}//设置地图颜色
            //         },
            //         emphasis: {
            //             label: {
            //                 show: true
            //             }
            //         }
            //     }
            // },
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data1),
                symbolSize: function (val) {
                    console.log('val2', val)
                    if(val[2]===133)
                    return val[2] /10;
                },
                encode: {
                    value: 133
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'green',  
                    }
                }
            },
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data.sort(function (a, b, c) {
                    console.log(a, b, c)
                    return b.value - a.value;
                }).slice(0, 3)),
                symbolSize: function (val) {
                    console.log('b-a', val)
                    return val[2] / 10;
                },
                encode: {
                    value: 135
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                itemStyle: {
                    normal: {
                        borderColor: "#293171",
                        borderWidth: "2",
                        areaColor: "#0A0F33",
                    },
                    emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
                zlevel: 1
            }
        ]
    };
    if (option && typeof option === 'object') {
        chinaMap.setOption(option);
    }    

    var setFont = function () {
        // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
        var html = document.documentElement;// 获取html
        var myView = document.getElementById("myView");
        // 获取宽度
        var width = myView.clientWidth;
        // 判断
        if (width < 1024) width = 1024
        if (width > 1920) width = 1920
        // 设置html的基准值
        var fontSize = width / 80 + 'px';
        // 设置给html
        // html.style.fontSize = fontSize;
        // myView.style.fontSize = fontSize;
    }
    setFont();
    // 2、页面改变的时候也需要设置
    // 尺寸改变事件
    window.onresize = function () {
        setFont();
    }

    $('.monitor').on('click', ' a', function () {
        //点击当前的a 加类名 active  他的兄弟删除类名
        $(this).addClass('active').siblings().removeClass('active');
        //获取一一对应的下标 
        var index = $(this).index();
        //选取content 然后狗日对应下标的 显示   当前的兄弟.content隐藏
        $('.content').eq(index).show().siblings('.content').hide();
    });
    //滚动
    //原理：把marquee下面的子盒子都复制一遍 加入到marquee中
    //      然后动画向上滚动，滚动到一半重新开始滚动
    //因为选取的是两个marquee  所以要遍历
    $('.monitor .marquee').each(function (index, dom) {
        //将每个 的所有子级都复制一遍
        var rows = $(dom).children().clone();
        //再将新的到的加入原来的
        $(dom).append(rows);
    });


    var myPieEchart = echarts.init($('#dianwei')[0]);
    pieOption = {
        // 控制提示
        tooltip: {
            // 非轴图形，使用item的意思是放到数据对应图形上触发提示
            trigger: 'item',
            // 格式化提示内容：
            // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 控制图表
        series: [
            {
                // 图表名称
                name: '地区',
                // 图表类型
                type: 'pie',
                // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                // 百分比基于  图表DOM容器的半径
                radius: ['10%', '70%'],
                // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                center: ['50%', '50%'],
                // 半径模式，另外一种是 area 面积模式
                roseType: 'radius',
                // 数据集 value 数据的值 name 数据的名称
                data: provinceData,
                //文字调整
                label: {
                    fontSize: 10
                },
                //引导线
                labelLine: {
                    length: provinceNum,
                    length2: 10
                }
            }
        ],
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    };
    myPieEchart.setOption(pieOption);


    var item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        }
    };
    usersBarOption = {
        // 工具提示
        tooltip: {
            // 触发类型  经过轴触发axis  经过轴触发item
            trigger: 'item',
            // 轴触发提示才有效
            axisPointer: {
                // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果       
                type: 'shadow'
            }
        },
        // 图表边界控制
        grid: {
            // 距离 上右下左 的距离
            left: '0',
            right: '3%',
            bottom: '3%',
            top: '5%',
            // 大小是否包含文本【类似于boxsizing】
            containLabel: true,
            //显示边框
            show: true,
            //边框颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        // 控制x轴
        xAxis: [
            {
                // 使用类目，必须有data属性
                type: 'category',
                // 使用 data 中的数据设为刻度文字
                data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                // 刻度设置
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    show: false
                },
                //文字
                axisLabel: {
                    color: '#4c9bfd'
                }
            }
        ],
        // 控制y轴
        yAxis: [
            {
                // 使用数据的值设为刻度文字
                type: 'value',
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    show: false
                },
                //文字
                axisLabel: {
                    color: '#4c9bfd'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                },
            }
        ],
        // 控制x轴
        series: [

            {
                // series配置
                // 颜色
                itemStyle: {
                    // 提供的工具函数生成渐变颜色
                    color: new echarts.graphic.LinearGradient(
                        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#00fffb' }, // 0 起始颜色
                            { offset: 1, color: '#0061ce' }  // 1 结束颜色
                        ]
                    )
                },
                // 图表数据名称
                name: '用户统计',
                // 图表类型
                type: 'bar',
                // 柱子宽度
                barWidth: '60%',
                // 数据
                data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
            }
        ]
    };
    var myUsersBarEchart = echarts.init($('.users .bar')[0]);
    myUsersBarEchart.setOption(usersBarOption);


    var orderData = {
        day365: { orders: '20,301,987', amount: '99834' },
        day90: { orders: '301,987', amount: '9834' },
        day30: { orders: '1,987', amount: '3834' },
        day1: { orders: '987', amount: '834' }
    }
    //点击事件
    $('.order').on('click', '.filter a', function () {
        //点击之后加类名
        $(this).addClass('active').siblings().removeClass('active');
        // 先获取点击a的 data-key自定义属性
        var orderKey = $(this).attr('data-key');
        //获取自定义属性
        // data{}==>data.shuxing data['shuxing]
        orderKey = orderData[orderKey];//
        $('.order .item h4:eq(0)').text(orderKey.orders);
        $('.order .item h4:eq(1)').text(orderKey.amount);
    });
    //定时器
    var index = 0;
    var aclick = $('.order a');
    setInterval(function () {
        index++;
        if (index > 3) {
            index = 0;
        }
        //每san秒调用点击事件
        aclick.eq(index).click();
    }, 3000);


    var lineOption = {
        //鼠标提示工具
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            // 类目类型                                  
            type: 'category',
            // x轴刻度文字                                  
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false//去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd'//文本颜色
            },
            axisLine: {
                show: false//去除轴线  
            },
            boundaryGap: false//去除轴内间距
        },
        yAxis: {
            // 数据作为刻度文字                                  
            type: 'value',
            axisTick: {
                show: false//去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd'//文本颜色
            },
            axisLine: {
                show: false//去除轴线  
            },
            boundaryGap: false//去除轴内间距
        },
        //图例组件
        legend: {
            textStyle: {
                color: '#4c9bfd' // 图例文字颜色

            },
            right: '10%'//距离右边10%
        },
        // 设置网格样式
        grid: {
            show: true,// 显示边框
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        series: [{
            name: '预期销售额',
            // 数据                                  
            data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            // 图表类型                                  
            type: 'line',
            // 圆滑连接                                  
            smooth: true,
            itemStyle: {
                color: '#00f2f1'  // 线颜色
            }
        },
        {
            name: '实际销售额',
            // 数据                                  
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            // 图表类型                                  
            type: 'line',
            // 圆滑连接                                  
            smooth: true,
            itemStyle: {
                color: '#ed3f35'  // 线颜色
            }
        }]
    };
    var myLineEchart = echarts.init($('.line')[0]);
    myLineEchart.setOption(lineOption);

    //点击效果
    var lineData = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    }
    $('.sales ').on('click', '.caption a', function () {
        $(this).addClass('active').siblings('a').removeClass('active');
        //option series   data
        //获取自定义属性值
        var lineKey = $(this).attr('data-type');
        //取出对应的值
        lineKey = lineData[lineKey];
        //将值设置到 图表中
        lineOption.series[0].data = lineKey[0];
        lineOption.series[1].data = lineKey[1];
        //再次调用才能在页面显示
        myLineEchart.setOption(lineOption);
    });
    //定时器
    var index = 0;
    var timer = setInterval(function () {
        index++;
        if (index > 4) {
            index = 0;
        };
        $('.sales .caption a').eq(index).click();
    }, 2000);


    var gaugeOption = {
        series: [
            {
                type: 'pie',
                radius: ['130%', '150%'],  // 放大图形
                center: ['50%', '80%'],    // 往下移动  套住75%文字
                label: {
                    show: false,
                },
                startAngle: 180,
                hoverOffset: 0,  // 鼠标经过不变大
                data: [
                    {
                        value: 100,
                        itemStyle: { // 颜色渐变#00c9e0->#005fc1
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#00c9e0' },
                                    { offset: 1, color: '#005fc1' }
                                ]
                            }
                        }
                    },
                    { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d

                    { value: 200, itemStyle: { color: 'transparent' } }// 透明隐藏第三块区域
                ]
            }
        ]
    };
    var myGaugeEchart = echarts.init($('.gauge')[0]);
    myGaugeEchart.setOption(gaugeOption);


    var myLeixingPieEchart = echarts.init($('#leixing')[0]);
    leixingOption = {
        // 控制提示
        tooltip: {
            // 非轴图形，使用item的意思是放到数据对应图形上触发提示
            trigger: 'item',
            // 格式化提示内容：
            // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 控制图表
        series: [
            {
                // 图表名称
                name: '设备类型',
                // 图表类型
                type: 'pie',
                // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                // 百分比基于  图表DOM容器的半径
                radius: ['10%', '70%'],
                // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                center: ['50%', '50%'],
                // 半径模式，另外一种是 area 面积模式
                roseType: 'radius',
                // 数据集 value 数据的值 name 数据的名称
                data: [{"value": 87, "name": '云盒'},{"value": 58, "name": '烟感探头'},{"value": 73, "name": '智能开关'},{"value": 68, "name": '蓝牙锁'}],
                //文字调整
                label: {
                    fontSize: 10
                },
                //引导线
                labelLine: {
                    length: 4,
                    length2: 10
                }
            }
        ],
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
    };
    myLeixingPieEchart.setOption(leixingOption);

});
</script>
</html>